Ext.ns('tj');

tj.CollapsingForm = Ext.extend(Ext.Container, {

    innerItems: null,
    collapseText: '',
    preCollapsed: false,

    plusStyle: 'background-image:url(resources/icons/plusgrey16x16.png)',
    minusStyle: 'background-image:url(resources/icons/minusgrey16x16.png)',

    constructor: function (config) {
	
	this.innerItems = config.items || [];
	config.items = null;

	this.collapseText = config.collapseText;
	if (config.preCollapsed !== undefined) {
	    this.preCollapsed = config.preCollapsed;
	}

	tj.CollapsingForm.superclass.constructor.call(this, config);
    },

    initComponent: function () {
	var thisObject = this;

	this.listeners = this.listeners || {};

	this.items = [{
	    // COLLAPSING TITLE
	    xtype: 'container',
	    style: 'cursor: hand; cursor: pointer;',
	    height: 18,
	    listeners: {
		afterrender: function (self) {
		    self.getEl().on('click', thisObject.onClick.createDelegate(thisObject));
		}
	    },
	    layout: {
		type: 'hbox',
		align: 'middle'
	    },
	    items: [{
		xtype: 'box',
		width: 16,
		height: 16,
		style: (this.preCollapsed ? this.plusStyle : this.minusStyle),
		ref: '../iconBox'
	    },{
		xtype: 'spacer',
		width: 5
	    },{
		xtype: 'box',
		style: 'font-size:13;color:#0000b0',
		html: this.collapseText,
	    },{
		xtype: 'spacer',
		width: 5
	    },{
		xtype: 'box',
		flex: 1,
		height: 16,
		style: 'background-image:url(resources/icons/line16x16.png);background-repeat:repeat-x;'
	    }]
	    // COLLAPSING TITLE
	},{
	    // PANEL CONTENT
	    xtype: 'panel',
	    ref: 'contentPanel',
	    padding: 5,
	    collapsed: this.preCollapsed,
	    items: this.innerItems,
	    border: false,
	    padding: 0
	    // PANEL CONTENT
	},{
	    xtype: 'spacer',
	    height: 5
	}];

	tj.CollapsingForm.superclass.initComponent.apply(this, arguments);
    },

    onClick: function () {
	if (this.contentPanel.collapsed) {
	    this.contentPanel.expand();
	    this.iconBox.getEl().applyStyles(this.minusStyle);
	} else {
	    this.contentPanel.collapse();
	    this.iconBox.getEl().applyStyles(this.plusStyle);
	}
    }
});

Ext.reg('tj.collapsingform', tj.CollapsingForm);